 <template>
  <div>
    <!-- <router-link to="/org/album/add"> -->
    <el-button
      class="filter-item add-style"
      style="margin-left: 10px;"
      type="primary"
      size="mini"
      icon="el-icon-circle-plus-outline"
      @click="addAlbum"
    >添加</el-button>
    <!-- </router-link> -->

    <el-dialog title="修改提成比例" :visible.sync="dialogVisible" width="40%">
      <el-form :model="formData" ref="formData" label-width="100px">
        <el-form-item label="课程封面">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            accept=".gif, .jpg, .jpeg, .bmp, .png"
            :headers="token"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img class="avatar-uploader" v-if="formData.coverUrl" :src="formData.coverUrl" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item
          style="margin: 0 0 20px 0"
          prop="name"
          label="栏目名称"
          :rules="[{required: true, message: '添加新的栏目', trigger: 'blur'}]"
        >
          <el-input v-model="formData.name" placeholder="添加新的栏目"></el-input>
        </el-form-item>

        <el-form-item
          prop="description"
          label="描述"
          :rules="[{required: true, message: '添加栏目描述', trigger: 'blur'}]"
        >
          <el-input type="textarea" v-model="formData.description" placeholder="添加栏目描述"></el-input>
        </el-form-item>

        <el-form-item label="是否免费">
          <el-switch v-model="formData.free" active-color="#13ce66" inactive-color="#ccc"></el-switch>
        </el-form-item>

        <el-form-item v-if="!formData.free" label="价格">
          <el-input class="input-width" v-model="formData.price" placeholder="请输入价格"></el-input>
        </el-form-item>

        <el-form-item v-if="!formData.free" label="分享价格">
          <el-input class="input-width" v-model="formData.sharePrice" placeholder="请输入分享价格"></el-input>
        </el-form-item>

        <el-form-item label="课程是否结束">
          <el-switch v-model="formData.finish" active-color="#13ce66" inactive-color="#ccc"></el-switch>
        </el-form-item>

        <el-form-item>
          <el-button class="add-style" type="primary" size="small" @click="addColumn">完成</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <tTable :columns="columns" :data="tableData">
      <!-- 封面 -->
      <template v-slot:cover="slotProps">
        <img class="cover-style" :src="slotProps.scope.row.coverUrl" alt />
      </template>
      <!-- 价格 -->
      <template v-slot:price="slotProps">
        <div v-if="slotProps.scope.row.price">￥{{slotProps.scope.row.price}}</div>
      </template>
      <!-- 分享价格 -->
      <template v-slot:sharePrice="slotProps">
        <div v-if="slotProps.scope.row.sharePrice">￥{{slotProps.scope.row.sharePrice}}</div>
      </template>
      <!-- 状态 -->
      <template v-slot:free="slotProps">
        <el-tag
          :type="slotProps.scope.row.free | freeFilter"
        >{{slotProps.scope.row.free ? '免费' : '付费'}}</el-tag>
      </template>

      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          type="info"
          size="mini"
          @click="editItem(slotProps.scope.row, slotProps.scope.$index)"
        >编辑</el-button>
        <el-button
          class="add-style"
          type="primary"
          size="mini"
          @click="getCourseList(slotProps.scope.row.id)"
        >课程列表</el-button>
        <el-button
          type="warning"
          size="mini"
          @click="getPerson(slotProps.scope.row)"
          v-if="!slotProps.scope.row.free"
        >购买用户</el-button>

        <el-button
          type="danger"
          class="delete-style"
          size="mini"
          @click="removeItem(slotProps.scope.row)"
          slot="reference"
        >删除</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange" />
  </div>
</template>

<script>
import { baseUrl } from "../../../config/env.js";
import { getToken } from "src/util/auth";

import { formatDateTime } from "src/util/time.js";
import {
  getAllVideo,
  deleteVideo,
  createAlbum,
  updateAlbum
} from "api/org_album";
import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  filters: {
    freeFilter(status) {
      const statusMap = {
        false: "warning",
        true: "success"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      videoUrl: "", // 当前视频预览地址
      searchData: "",
      tableData: [], // 专栏列表
      currentId: -1,

      total: -1,
      personTotal: -1, // 报名人员总数
      booleanTrue: true,

      // 创建专栏
      dialogVisible: false,
      formData: {
        coverUrl: "",
        description: "",
        finish: false,
        free: true,
        name: "",
        price: 0,
        sharePrice: 0
      },
      uploadUrl: baseUrl + "/qiniu/v1", // 上传封面地址
      token: { Authorization: "" }, // 上传图片需要的token

      // 创建专栏
      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "名称" }
        },
        {
          slot: "cover",
          attr: { prop: "cover", label: "封面", width: "100" }
        },
        {
          attr: { prop: "description", label: "描述" }
        },
        {
          slot: "free",
          attr: { prop: "free", label: "免费", width: "100" }
        },
        {
          attr: { prop: "updatedNumber", label: "更新数", width: "100" }
        },
        {
          attr: { prop: "createTime", label: "创建时间", width: "160" }
        },
        {
          attr: { prop: "updateTime", label: "修改时间", width: "160" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "400" }
        }
      ]
    };
  },
  components: { Pagination, tTable },
  mounted() {
    this.getData(1);
    this.token.Authorization = getToken();
  },
  methods: {
    getData: function(pageNumber) {
      getAllVideo(pageNumber).then(res => {
        this.total = res.totalElements;
        this.tableData = res.content.map((item, index) => {
          item.createTime = formatDateTime(item.createTime);
          item.updateTime = formatDateTime(item.updateTime);
          return item;
        });
      });
    },
    removeItem(item) {
      this.$confirm("确认删除这个商品么？").then(_ => {
        deleteVideo(item.id).then(res => {
          this.$message.success("删除成功");
          this.getData(1);
        });
      });
    },
    // 获取某一个视频产品的购买用户列表
    getPerson(item) {
      this.$router.push("/org/album/buyer/" + item.id);
    },
    editItem(row) {
      this.dialogVisible = true;
      this.currentId = row.id;
      this.formData = row;
    },
    handleChange: function(pageNumber) {
      this.getData(pageNumber);
    },
    addAlbum: function() {
      this.dialogVisible = true;
      this.currentId = "";
      this.formData = {
        coverUrl: "",
        description: "",
        finish: false,
        free: true,
        name: "",
        price: 0,
        sharePrice: 0
      };
    },
    // 课程列表
    getCourseList: function(id) {
      this.$router.push("/org/album/" + id + '/course');
    },
    // --------------专栏创建---------------

    handleAvatarSuccess(res) {
      if (res.status > 200) {
        this.$message.error(res.message);
        return;
      }
      this.formData.coverUrl = res.data;
    },

    addColumn() {
      this.$refs.formData.validate(val => {
        if (val) {
          if (this.currentId) {
            updateAlbum(this.currentId, this.formData).then(res => {
              this.$message.success("修改成功");
              this.getData();
            });
          } else {
            createAlbum(this.formData).then(res => {
              this.$message.success("添加成功");
              this.getData();
            });
          }
          this.dialogVisible = false;
        } else {
          return false;
        }
      });
    }
    // --------------专栏创建---------------
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

//----------------封面上传---------------
.avatar-uploader {
  // border: 1px dashed #d9d9d9;
  // border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px dotted #f1f1f1;
  border-radius: 10px;
  width: 140px;
  height: 140px;
  margin: 10px 0;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
//----------------封面上传---------------

.cover-style {
  width: 50px;
  height: 50px;
  display: block;
  margin: 5px 0;
}
</style>
